<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../../yl/index.css" />
    <link rel="stylesheet" href="../../../style/index.css" />
    <title>村级台账</title>
    <style>
        .el-tabs {
            height: 100%;
        }

        .el-tabs__content {
            overflow: auto;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="title">
            <div style="padding: 5px;">
                文件名称<el-input v-model="page.value1" style="width: 200px; margin:0 10px;" placeholder="请输入标题"></el-input>
                上报科室<el-input v-model="page.value2" style="width: 200px; margin:0 10px;" placeholder="请输入上报科室"></el-input>
                文件来源<el-input v-model="page.value3" style="width: 200px; margin:0 10px;" placeholder="请输入文件来源"></el-input>
                类型<el-select clearable v-model.trim="page.value4" placeholder="请选择村级台账类型" filterable style="width: 200px; margin:0 10px;">
                  <el-option v-for="(item,index) in xlsx_table_type" :key="index" :label="item.Xlsx_Table_Type"
                    :value="item.Xlsx_Table_Type_SerialNumber"></el-option>
                </el-select>
                <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
                <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
                <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>添加</el-button>
                <!-- <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导入</el-button>
                <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" @click="personalAdd"
                    plain round>批量导出</el-button>
                <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" @click="personalAdd" plain
                    round>批量删除</el-button> -->
            </div>
        </div>
        <div class="body" v-cloak>
            <div class="right">
                <el-tabs type="card">
                    <el-tab-pane label="下载中心" style="height: 100%; display: flex; flex-direction: column;">
                        <el-table id="table" border
                            :data-options="JSON.stringify({ 'TableName': 'xlsx_table','primary_key':'Xlsx_Table_SerialNumber'})"
                            v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
                            @selection-change="handleSelectionChange">
                            <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                            <el-table-column min-width="180" v-for="column in columns" :key="column.COLUMN_NAME"
                                :prop="column.COLUMN_NAME" :label="column.COLUMN_COMMENT">
                                <template v-slot="{row}">
                                    <div v-if="isValueType(row[column.COLUMN_NAME])=='image'">
                                        <el-image style="width: 100px; height: 100px"
                                            :src="photo + row[column.COLUMN_NAME]" fit="contain"></el-image>
                                    </div>
                                    <template v-else>
                                        {{row[column.COLUMN_NAME]}}
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" width="180">
                                <template #default="{row}">
                                    <div style="display: flex; align-items: center;">
                                        <el-upload class="upload-demo" ref="upload" action=""
                                            :on-change="(file)=>{this.handleUpload(file,row)}" :show-file-list="false"
                                            :auto-upload="false">
                                            <el-button style="margin-right: 10px;" slot="trigger" size="small"
                                                type="primary">上传数据</el-button>
                                        </el-upload>
                                        <el-dropdown trigger="click">
                                            <el-button type="danger" size="small">
                                                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                            </el-button>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <el-dropdown-item @click="handleDownload(row)">
                                                        下载模板
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click="handleDownload(row,false)">
                                                        导出数据
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click="handleDelete(row)">
                                                        删除
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination style="margin-top: 1%;flex-shrink: 0;" :current-page="page.PageNumber"
                            :page-size="page.RowAmount" :page-sizes="[20, 100, 200, 300, 400]"
                            layout="total, sizes, prev, pager, next, jumper" :total="Total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-tab-pane>
                    <el-tab-pane label="表单管理" style="height: 100%; display: flex; flex-direction: column;">
                        <div style="background-color:#ebeef5; height: 100%;overflow: auto;" v-cloak>
                            <div v-for="(item,index) in Tabletdata" :key="index"
                                style="float: left; display: flex;flex-direction: column; width: 260px ;background-color: #fff;margin:10px 0 0 10px;">
                                <div style="display: flex;justify-content: center;padding: 20px;">
                                    <el-image style="width: 80px;" fit="contain"
                                        src="../../../admin/images/xlsx.png"></el-image>
                                </div>
                                <div
                                    style="margin: 0 10px 10px; display: flex;flex-direction: column;font-size: 14px;color:#606266">
                                    <div style="height: 23px;margin-bottom: 10px;">
                                        <span style="font-weight: bold;">{{item.Xlsx_File_Name}}</span>
                                    </div>
                                    <div style="height: 23px;margin-bottom: 10px;">
                                        <span style="color: #989ba1;">上传时间：</span>
                                        <span>{{item.Create_Datetime}}</span>
                                    </div>
                                    <div style="height: 23px;margin-bottom: 10px;">
                                        <span style="color: #989ba1;">更新时间：</span>
                                        <span>{{item.Update_Datetime}}</span>
                                    </div>
                                </div>
                                <div
                                    style="border-top: 1px solid #ebeef5;text-align: center;display: flex;font-size: 14px;padding: 10px 0px;">
                                    <div @click="handleShow(item)"
                                        style="cursor: pointer; width: 100%;border-right:1px solid #ebeef5;color: #409EFF; font-weight: bold;">
                                        查看</div>
                                    <div @click="handleDelete(item)" style="cursor: pointer; width: 100%;color: #F56C6C;">删除</div>
                                </div>

                            </div>
                        </div>
                        <el-pagination style="margin-top: 1%;flex-shrink: 0;" :current-page="page.PageNumber"
                            :page-size="page.RowAmount" :page-sizes="[20, 100, 200, 300, 400]"
                            layout="total, sizes, prev, pager, next, jumper" :total="Total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
    </div>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../config/config.js"></script>
    <script src="../../../utils/mixins.js"></script>
    <script src="../../../yl/vue.js"></script>
    <script src="../../../yl/index.js"></script>
    <script src="../../../yl/zh-cn.mjs"></script>
    <script src="../../../yl/index.iife.min.js"></script>
    <script src="../../../yl/jquery.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../api/request.js"></script>
    <script src="../../../utils/xlsx.full.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>